import React,{useState} from 'react'
import { NavBar,Input } from '@nutui/nutui-react'
import { ArrowLeft, Share } from '@nutui/icons-react'
export default function Fa() {
    const [currentLength, setCurrentLength] = useState(0)
  return (
    <div>
         <NavBar
        back={
          <>
            <ArrowLeft />
            取消
          </>
        }
        right={
          <span className="flex-center" onClick={(e) => Toast.show('icon')}>
           <div style={{fontSize:'17px',
            borderRadius:'20px',width:'50px',height:'10px',lineHeight:"10px",textAlign:'center',color:'white'
            ,padding:'8px',backgroundColor:'rgb(36,200,116)'}}>发布</div>
          </span>
        }
        onBackClick={(e) => Toast.show('返回')}
      >
        发布动态
      </NavBar>
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          background: '#fff',
          padding: '0 10px',
        }}
      >
        <Input
          type="text"
          maxLength={20}
          onChange={(val) => setCurrentLength(val.length)}
        />
        <div className="right" style={{ fontSize: '12px',position:'absolute', right:'10px',bottom:'20px'}}>
          {currentLength} / 20
        </div>
      </div>
        <div style={{marginTop:'500px',marginLeft:'20px'}}>
            <img style={{width:'80px',float:'left'}} src='https://cdn7.axureshop.com/demo2024/2268035/images/%E6%90%9C%E7%B4%A2%E7%BB%93%E6%9E%9C/p16.png'></img>
            <img style={{width:'80px',marginLeft:'5px',float:'left'}} src='https://cdn7.axureshop.com/demo2024/2268035/images/%E6%90%9C%E7%B4%A2%E7%BB%93%E6%9E%9C/p16.png'></img>
            <div style={{width:'80px',display:'inline-block',textAlign:'center',
    height:'80px',float:'left',marginLeft:'10px',lineHeight:'80px',fontSize:'23px',
    backgroundColor:'rgb(245,245,245)'

            }}>
                +
            </div>
        </div>

    </div>
  )
}
